<!-- 线上店铺页面 -->
<template>
		<view class="container">
			<!-- #ifdef MP-WEIXIN -->
			<view class="header" v-show="indexShow != 3" :style="{ paddingTop: MenuButtonTop - 6 + 'px' }">
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view v-show="indexShow != 3" class="header">
			<!-- #endif -->
				<view class="nav">
					<text class="cell-more yticon icon-zuo" @tap="back"></text>
					<view class="uni-searchbox">
						<view class="uni-search-input">
							<icon type="search" :size="13" color="#999"></icon>
							<input type="text" confirm-type="search" placeholder="请输入商品名字" placeholder-class="uni-input-plholder" class="uni-input"
							 v-model.trim="key" @confirm="confirmKey" />
						</view>
					</view>
				</view>
				<view class="shop-info">
					<image class="logo" :src="sellerInfo.online_logo" mode=""></image>
					<view class="con">
						<view class="title">
							<view class="title__name">
								<image v-if="sellerInfo.seller_type==2" class="zhiying__image" src="../../static/images/public/123.png" mode=""></image>
								{{ sellerInfo.online_name||'' }}
							</view>
						</view>
						<view class="info__rate">
							<uni-rate class="rate" active="white" normal="white" bgSeleColor="#E65431" bgNoSeleColor="grey" :isIndexRate="true"
							 :size="15" :current="5" disabled></uni-rate>
						</view>
						<view class="info__type">
							<text style="padding: 0 2px;">下单送贝壳</text>
						</view>
						<!-- <view class="info__label">
							<view class="label_item" v-for="(it,ind) in sellerInfo.label" :key="ind">{{it}}</view>
						</view> -->
					</view>
					<view class="right">
						<view :class="['colect-box', shopCollect ? 'back-red' : '']" @tap="switchCollect">
							<image class="shoucang" :src="shopCollect ?'../static/images/collect-icon2.png' : '../static/images/collect-icon.png' "
							 mode=""></image>
							<!-- <text class="yticon icon-shoucang"></text> -->
							<text class="txt">收藏</text>
						</view>

						<text class="num-of">{{sellerInfo.collect||0}}人收藏</text>
					</view>
				</view>
			</view>
			<view v-show="indexShow == 3" class="relation">
				<view class="back-head">
					<view class="nav">
						<text class="cell-more yticon icon-zuo" @tap="back"></text>
						<text class="title">联系店铺</text>
						<text></text>
					</view>
				</view>
				<view class="cont">
					<image src="../static/images/mall-shop-icon.png" mode=""></image>
					<view class="right">
						<view class="rela-tit">联系店铺</view>
						<view class="desc">有问题，找客服</view>
						<view class="call-phone" @tap="makePhoneCall">立即拨打</view>
					</view>
				</view>
			</view>
			<view v-show="indexShow == 1" class="content">
				<!-- #ifdef MP-WEIXIN -->
				<view class="navbar" :style="{top:MenuButtonTop + 120 + 'px' }">
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view class="navbar">
				<!-- #endif -->
					<view class="nav-item" :class="{ current: filterIndex === 0 }" @click="tabClick(0)">默认</view>
					<view class="nav-item" :class="{ current: filterIndex === 1 }" @click="tabClick(1)">销量</view>
					<view class="nav-item" :class="{ current: filterIndex === 2 }" @click="tabClick(2)">
						<text>价格</text>
						<view class="p-box">
							<text :class="{ active: priceOrder === 1 && filterIndex === 2 }" class="yticon icon-shang"></text>
							<text :class="{ active: priceOrder === 2 && filterIndex === 2 }" class="yticon icon-shang xia"></text>
						</view>
					</view>
					<view class="nav-item" :class="{ current: filterIndex === 3 }" @click="tabClick(3)">新品</view>
				</view>
				<view class="goodsList">
					<goods-block :goodsList="goodsList" :scrollTop="scrollTop"  :enjoy="sellerInfo.roles == 21?true:false"></goods-block>
				</view>
				<uni-load-more :status="loadingType"></uni-load-more>
			</view>
			<view v-show="indexShow == 2" class="cate">
				<block v-for="(item,index) in categoryList" :key="index">
					<view class="item">
						<view class="sect-head" @tap="clickCate(item,item.id)">
							<view class="title">{{item.cate_name}}</view>
							<text class="cell-more yticon icon-you"></text>
						</view>
						<!-- <view class="content" v-if="item.children.length > 0">
								<block v-for="(itt,inn) in item.children" :key="inn">
									<view class="children-item" @tap.stop="cateClick(itt)">
										{{itt.cate_name}}
									</view>
								</block>
							</view> -->
					</view>
				</block>
				<!-- <block v-for="(item,index) in sellerPriceList" :key="index"> -->
				<view class="item" :style="{height: active ? 'auto' : 100+'rpx'}">
					<view class="sect-head" @tap="clickCate(null,null)">
						<view class="title">按价格分类</view>
						<text class="cell-more yticon icon-you"></text>
					</view>
					<view class="content">
						<block v-for="(itt,inn) in sellerPriceList" :key="inn">
							<view class="children-item" @tap.stop="cateClick(itt)">
								{{itt.price}}
							</view>
						</block>
					</view>
				</view>
				<!-- </block> -->
			</view>

			<view class="bottom-tab">
				<view :class="['item', indexShow == index+1 ? 'active' : '']" @tap="clickBottom(item.id)" v-for="(item,index) in bottomTab"
				 :key="index">
					<image :src="indexShow ==index+1 ? item.selectIcon : item.icon" mode=""></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
</template>

<script>
	import {
		systemConfig
	} from '@/api/public.js'
	import {
		getProducts,
		vipBuy,
		sellerCategory,
		sellerIscollct,
		sellerCollectAdd,
		sellerCollectDel,
		sellerCategoryPrice
	} from '@/api/mall.js';
	import {
		getsellerinfobyid
	} from '@/api/merchant.js';
	import goodsBlock from '@/components/goodsBlock/goodsBlock.vue';

	export default {
		data() {
			return {
				id: null,
				//#ifdef MP-WEIXIN
				MenuButtonTop: getApp().globalData.MenuButtonTop,
				//#endif
				cateMaskState: 0, //分类面板展开状态
				loadingType: 'loading', //加载更多状态
				filterIndex: 0,
				cateId: '', //已选三级分类id
				priceOrder: '', //1 价格从低到高 2价格从高到低
				salesOrder: '',
				cateList: [],
				goodsList: [],
				page: 1,
				limit: 16,
				keys: '',
				sellerInfo: {},
				bottomTab: [{
						id: 1,
						name: '全部商品',
						selectIcon: '/mall/static/images/shop-icon1.png',
						icon: '/mall/static/images/shop-icon2.png',
					},
					{
						id: 2,
						name: '商品分类',
						selectIcon: '/mall/static/images/tabbar/2.png',
						icon: '/mall/static/images/shop-icon4.png',
					},
					{
						id: 3,
						name: '联系店铺',
						selectIcon: '/mall/static/images/shop-icon5.png',
						icon: '/mall/static/images/shop-icon6.png',
					}
				],
				indexShow: 1,
				isNew: 0, //是否新品
				personal_shell_ration: 1,
				categoryList: [],
				active: true,
				shopCollect: 0,
				key: '',
				sellerPriceList: [], //价格
				scrollTop:0
			}
		},
		components: {
			goodsBlock
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		//加载更多
		onReachBottom() {
			if (this.loadingType == 'more') {
				this.page = this.page + 1;
				this.loadData();
			}
		},
		created() {
			this.createdFun();
		},
		onLoad(options) {
			this.id = options.id;
			this.loadData();
			this.getSellerInfo();
			this.sellerCategory();
			if (uni.getStorageSync('Authori-zation')) {
				this.sellerIscollct();
			}
		},
		methods: {
			createdFun() {
				systemConfig({
					filed: 'personal_shell_ration'
				}).then(res => {
					this.personal_shell_ration = Number(res.msg) / 100;
				});
				sellerCategoryPrice().then(res => {
					this.sellerPriceList = res.data;
				});
			},
			loadData() {
				getProducts({
					seller_id: this.id,
					sid: this.cateId,
					page: this.page,
					limit: this.limit,
					keyword: this.keys,
					priceOrder: this.priceOrder, //价格排序
					salesOrder: this.salesOrder, //销量排序
					news: this.isNew
				}).then(res => {
					let list = res.data.map((val, key) => {
						val.blackS = (Number(val.price) * ((100 - val.rebate_ratio) * this.personal_shell_ration) / 100).toFixed(2);
						return val;
					});
					this.goodsList = this.goodsList.concat(list);
					this.loadingType = res.data.length < this.limit ? 'nomore' : 'more';
				});
			},
			clickCate(obj, id) {
				if (id) {
					this.cateClick(obj, id);
					return
				}
				this.active = !this.active;
			},
			cateClick(obj, id) {
				let url = id ? `/mall/cate/list?id=${obj.id}&seller_id=${this.id}` :
					`/mall/cate/list?seller_id=${this.id}&priceRange=${obj.price}&priceType=${obj.type}`
				uni.navigateTo({
					url: url
				})
			},
			sellerCategory() {
				sellerCategory(this.id).then(res => {
					this.categoryList = res.data;
				})
			},
			sellerIscollct() {
				sellerIscollct(this.id).then(res => {
					this.shopCollect = res.data.count;
				})
			},
			switchCollect() {
				if (this.shopCollect) {
					sellerCollectDel({
						id: this.id,
						category: 'seller'
					}).then(res => {
						this.shopCollect = 0
					})
				} else {
					sellerCollectAdd({
						id: this.id,
						category: 'seller'
					}).then(res => {
						this.shopCollect = 1
					})
				}
				// this.shopCollect ? this.shopCollect = 0 : this.shopCollect = 1;
			},
			makePhoneCall() {
				if (this.sellerInfo.online_phone) {
					uni.makePhoneCall({
						phoneNumber: this.sellerInfo.online_phone
					})
				}
			},
			clickBottom(id) {
				this.indexShow = id;
			},
			confirmKey() {
				uni.navigateTo({
					url: `/mall/cate/list?key=${this.key}&seller_id=${this.id}`
				})
			},
			getSellerInfo() {
				getsellerinfobyid({
					seller_id: this.id
				}).then(res => {
					this.sellerInfo = res.data.seller_info;
				});
			},
			//筛选点击
			tabClick(index) {
				this.page = 1;
				this.goodsList = [];
				if (this.filterIndex === index && index !== 2) {
					return;
				}
				this.filterIndex = index;

				if (index === 2) {
					this.salesOrder = 0;
					this.priceOrder = this.priceOrder === 1 ? 'desc' : 1;
					this.isNew = 0;
				} else {
					this.priceOrder = 0;
					this.salesOrder = 0;

				}
				if (index === 1) {
					this.salesOrder = 'desc';
					this.priceOrder = 0;
					this.isNew = 0;
				}
				if (index === 3) {
					this.isNew = 1;
				}
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				});
				this.loadData('refresh', 1);
				uni.showLoading({
					mask:true,
					title: '正在加载'
				});
			},
			//详情
			navToDetailPage(item) {
				uni.navigateTo({
					url: `/mall/product/product?id=${item.id}`
				});
			},
			back() {
				uni.navigateBack({})
			},
			search() {}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;

		.header {
			background-color: #fff;
			position: sticky;
			top: 0;
			// #ifdef APP-PLUS
			padding-top: var(--status-bar-height);
			// #endif
			height: 126px;
			z-index: 2;

			.nav {
				height: 40px;
				position: relative;
				line-height: 40px;
				display: flex;
				align-items: center;

				.icon-zuo {
					font-size: 40rpx;
					padding: 0 0 0 20rpx;
				}

				.uni-searchbox {
					// #ifdef APP-PLUS
					width: 640rpx;
					// #endif
					// #ifdef MP-WEIXIN
					width: 440rpx;
					// #endif
					margin-left: 20rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;

					.uni-search-input {
						width: 100%;
						height: 33px;
						border-radius: 17px;
						padding: 0 30rpx;
						box-sizing: border-box;
						background: rgba(238, 238, 238, 1);
						display: flex;
						align-items: center;
						flex-wrap: nowrap;
						line-height: 0;

						.uni-input {
							flex: 1;
							color: #333;
							padding: 0 16rpx;
							font-size: 28rpx;
						}

						.uni-input-plholder {
							font-size: 28rpx;
							color: #999999;
						}
					}
				}

			}

			.shop-info {
				align-items: center;
				padding: 16rpx;
				border-radius: 8rpx;
				display: flex;
				justify-content: space-between;

				.logo {
					width: 70px;
					height: 70px;
					border-radius: 6rpx;
					margin-right: 20rpx;
				}

				.con {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					height: 70px;

					.title {
						position: relative;
						display: flex;
						justify-content: space-between;

						.title__name {
							letter-spacing: 0.5rpx;
							font-weight: bold;
							color: rgba(51, 51, 51, 1);
							font-size: 28rpx;
							// width: 100%;
							overflow: hidden;
							display: block;
							text-overflow: ellipsis;
							display: flex;
							align-items: center;

							// margin-left: 5px;
							font-size: 30rpx;
							color: #333;
							font-weight: bold;
							// height: 40px;
							// line-height: 20px;
							word-break: break-all;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							text-overflow: ellipsis;
							// .a {
							// 	width: 70rpx;
							// 	height: 28rpx;
							// 	margin-right: 10rpx;
							// }
						}
					}

					.info__rate {
						.rate {
							margin-right: 30rpx;
						}

						text {
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(51, 51, 51, 1);
						}
					}

					.info__type {
						font-size: 22rpx;
						font-weight: 400;
						color: rgba(153, 153, 153, 1);

						text {
							width: 91rpx;
							height: 31rpx;
							line-height: 31rpx;
							text-align: center;
							border: 1rpx solid rgba(255, 66, 75, 1);
							border-radius: 5rpx;
							font-size: 20rpx;
							color: rgba(255, 66, 75, 1);
							margin-right: 8rpx;
						}
					}

					.info__label {
						height: 45rpx;
						max-width: 344rpx;
						overflow: hidden;
						display: block;
						white-space: nowrap;
						text-overflow: ellipsis;

						.label_item {
							display: inline-block;
							background: rgba(230, 84, 49, 1);
							border-radius: 4rpx;
							padding: 4rpx 6rpx;
							color: #FFFFFF;
							font-size: 20rpx;
							margin-right: 15rpx;
						}
					}

					.info {
						display: flex;
						justify-content: space-between;
						font-size: 20rpx;

						.left {
							color: #999;

							text:nth-of-type(1) {
								margin-right: 20rpx;
							}
						}

						.right {
							font-size: 26rpx;
							color: $theme-color;
						}

					}

					.detail {
						font-size: 24upx;
						color: #333;
						display: flex;
						justify-content: space-between;

						text:nth-of-type(1) {
							width: 320rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						text:nth-of-type(2) {
							color: #999;
						}
					}
				}

				.right {
					text-align: center;
					width: 120rpx;
					font-size: 28rpx;

				}

				.colect-box {
					transition: all .1s linear;
					border: 1px solid rgba(251, 55, 55, 1);
					border-radius: 100rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					padding: 12rpx;

					.shoucang {
						width: 14px;
						height: 14px;
						// font-size: 28rpx;
						// color: #FB3737;
					}

					.txt {
						font-size: 20rpx;
						color: rgba(251, 55, 55, 1);
					}
				}

				.back-red {
					background-color: #FB3737;

					.txt {
						font-size: 20rpx;
						color: #fff;
					}
				}

				.num-of {
					font-size: 20rpx;
					color: rgba(51, 51, 51, 1);
					margin-top: 14rpx;
				}
			}

		}

		.content {
			padding-bottom: 80rpx;

			.navbar {
				position: sticky;
				// #ifdef APP-PLUS
				top: calc(var(--status-bar-height) + 126px);
				// #endif
				// #ifdef H5
				top: 126px;
				// #endif
				left: 0;
				display: flex;
				width: 100%;
				height: 80rpx;
				background: #fff;
				// box-shadow: 0 2rpx 10rpx rgba(0,0,0,.06);
				z-index: 10;

				.nav-item {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;
					font-size: 30rpx;
					color: $font-color-dark;
					position: relative;

					&.current {
						color: $mall-color-pri;
						// &:after{
						// 	content: '';
						// 	position: absolute;
						// 	left: 50%;
						// 	bottom: 0;
						// 	transform: translateX(-50%);
						// 	width: 120rpx;
						// 	height: 0;
						// 	border-bottom: 4rpx solid $mall-color-pri;
						// }
					}
				}

				.p-box {
					display: flex;
					flex-direction: column;

					.yticon {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 30rpx;
						height: 14rpx;
						line-height: 1;
						margin-left: 4rpx;
						font-size: 26rpx;
						color: #888;

						&.active {
							color: $mall-color-pri;
						}
					}

					.xia {
						transform: scaleY(-1);
					}
				}

				.cate-item {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;
					width: 80rpx;
					position: relative;
					font-size: 44rpx;

					&:after {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						border-left: 1px solid #ddd;
						width: 0;
						height: 36rpx;
					}
				}
			}

			.goodsList {
				padding: 20rpx 30rpx 0;
			}
		}

		.cate {
			padding: 30rpx 0 180rpx;

			.item {
				transition: all .3s linear;
				overflow: hidden;
				margin: 0 auto 30rpx;
				width: 91%;
				// height:100rpx;
				background: rgba(255, 255, 255, 1);
				border-radius: 10rpx;

				.sect-head {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 20rpx;
					box-sizing: border-box;
				}

				.title {
					font-size: 30rpx;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
					height: 100rpx;
					line-height: 100rpx;
					position: relative;
					margin: 0 0 0 20rpx;

					&::before {
						width: 8rpx;
						height: 30rpx;
						background-color: #FB3737;
						position: absolute;
						left: -16rpx;
						top: 50%;
						margin-top: -15rpx;
						content: "";

					}
				}

				.content {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					width: 100%;
					box-sizing: border-box;
					padding: 20rpx;
				}

				.children-item {
					height: 90rpx;
					box-sizing: border-box;
					padding-left: 20rpx;
					line-height: 90rpx;
					color: #333;
					font-size: 26rpx;
					background: rgba(247, 247, 247, 1);
					border-radius: 10rpx;
					width: 49%;
					margin-top: 10rpx;
				}
			}
		}


	}

	.relation {
		.back-head {
			width: 100%;
			height: 446rpx;
			background: linear-gradient(90deg, rgba(249, 47, 23, 1) 0%, rgba(252, 124, 49, 1) 100%);
			box-sizing: border-box;
			padding-top: 105rpx;

			.nav {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #fff;
				padding: 0 32rpx;
			}

			.icon-zuo {
				font-size: 43rpx;
			}

			.title {
				font-size: 36rpx;
			}

		}

		.cont {
			position: relative;
			top: -210rpx;
			width: 92%;
			margin: 0 auto;
			height: 345rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0 3rpx 32rpx 0 rgba(4, 0, 0, 0.19);
			border-radius: 20rpx;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 67rpx 50rpx;

			image {
				width: 210rpx;
				height: 210rpx;
			}

			.right {
				display: flex;
				flex-direction: column;
				text-align: center;

			}

			.rela-tit {
				font-size: 42rpx;
				font-weight: bold;
				color: rgba(44, 44, 44, 1);
			}

			.desc {
				margin: 20rpx 0 29rpx 0;
				font-size: 24rpx;
				color: rgba(134, 134, 134, 1);
			}

			.call-phone {
				color: #fff;
				font-size: 30rpx;
				width: 290rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: linear-gradient(90deg, rgba(255, 162, 24, 1), rgba(255, 106, 7, 1));
				border-radius: 36rpx;
			}
		}
	}

	.bottom-tab {
		padding: 10rpx 0 10rpx;
		padding: 10rpx 0 calc(10rpx + env(safe-area-inset-bottom));
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #f5f5f5;
		z-index: 99;
		display: flex;
		justify-content: space-around;
		background-color: #fff;

		image {
			width: 50rpx;
			height: 50rpx;
			position: relative;
			left: 20rpx;
			margin-bottom: 5rpx;
		}

		text {
			font-size: 20rpx;
		}

		.item {
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;

			&.active {
				color: red;
			}
		}
	}
</style>
